<template>
  <div class="detail">
    <!-- 顶部导航 -->
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.back()" />
    <!-- 文章标题 -->
    <h2>{{ articleInfo.title }}</h2>
    <!-- 作者信息 -->
    <div class="auth">
      <div class="left">
        <div class="img">
          <van-image
            round
            width="40px"
            height="40px"
            :src="articleInfo.aut_photo"
            fit="cover"
          />
        </div>
        <div class="info">
          <span>{{ articleInfo.aut_name }}</span>
          <span>{{ articleInfo.pubdate | timeFilter }}</span>
        </div>
      </div>
      <div class="right">
        <van-button
          size="small"
          round
          type="info"
          v-if="articleInfo.is_followed"
        >
          <van-icon name="plus" />关注
        </van-button>
        <van-button size="small" round type="info" v-else>
          <van-icon name="success" />未关注
        </van-button>
      </div>
    </div>
    <!-- 文章内容 -->
    <div class="article" v-html="articleInfo.content"></div>
    <!-- 关注 -->
    <!-- 评论区域 -->
    <!-- 点赞区域 -->
    <div class="comment">
      <div class="top">
        <p>--end--</p>
      </div>
      <div class="like">
        <div class="left">
          <van-button
            @click="links"
            plain
            size="small"
            round
            v-if="articleInfo.attitude === -1"
          >
            <van-icon name="good-job-o" />点赞
          </van-button>
          <van-button
            size="small"
            round
            type="danger"
            v-else-if="articleInfo.attitude === 1"
            @click="dislike"
          >
            <van-icon name="good-job-o" />点赞
          </van-button>
        </div>
        <div class="right">
          <van-button
            size="small"
            round
            type="danger"
            v-if="articleInfo.attitude === 0"
            @click="love"
          >
            <van-icon name="delete-o" />不喜欢
          </van-button>
          <van-button
            @click="dislove"
            plain
            size="small"
            round
            v-else-if="articleInfo.attitude === -1"
          >
            <van-icon name="delete-o" />不喜欢
          </van-button>
        </div>
      </div>
      <div class="tip">
        <p>没有更多了</p>
      </div>
    </div>
    <!-- 评论回复列表 -->
    <comments></comments>
  </div>
</template>

<script>
import comments from '../detail/comments/comments.vue'
import {
  getDetailsApi,
  getArticleLikingsApi,
  getArticleDislikingsApi,
  getArticleLoveApi,
  getArticleDisLoveApi
} from '@/api'
export default {
  data () {
    return {
      id: this.$route.query.id,
      articleInfo: {}
    }
  },
  async created () {
    //   打开页面时，请求文章详情
    // 获取文章id
    const res = await getDetailsApi(this.id)
    // console.log(res)
    this.articleInfo = res.data.data
    // 渲染数据
  },
  components: {
    comments
  },
  methods: {
    async links () {
      await getArticleLikingsApi({
        target: this.articleInfo.art_id
      })
      this.articleInfo.attitude = 1
      // console.log(res)
    },
    async dislike () {
      const res = await getArticleDislikingsApi(this.articleInfo.art_id)
      console.log(res)
      this.articleInfo.attitude = -1
    },
    async love () {
      await getArticleLoveApi({
        target: this.articleInfo.art_id
      })
      this.articleInfo.attitude = -1
    },
    async dislove () {
      await getArticleDisLoveApi(this.articleInfo.art_id)
      this.articleInfo.attitude = 0
    }
  }
}
</script>

<style lang="less">
.detail {
  padding: 0 10px;
  h2 {
    font-size: 16px;
    margin: 10px 10px;
  }
  .auth {
    margin: 5px 5px;
    font-size: 14px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      .img {
        margin: 0 10px 0 0;
      }
      .info {
        display: flex;
        flex-direction: column;
      }
    }
    .right {
      margin: 0 10px;
    }
  }
  .article {
    // width: 100%;
    // overflow: auto;

    font-size: 12px;
    // white-space: pre-wrap;
    white-space: pre-wrap;

    pre {
      white-space: pre-wrap;
      word-break: break-all;
    }
    img {
      width: 100%;
    }
  }
  .comment {
    margin: 100px 0;
    font-size: 14px;
    text-align: center;
    .like {
      padding: 20px 80px 40px 80px;
      display: flex;
      justify-content: space-around;
    }
    .tip {
      p {
        color: #999;
      }
    }
    .top {
      color: #999;
    }
  }
}
</style>
